<template>
    <div class="layout-padding">
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" label-width="80px" label-suffix=":">
            <el-form-item label="分类名称">
                <el-input v-model="query.name" placeholder="请输入分类名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="ele-Search" type="primary" @click="handleQuery()">查询</el-button>
                <el-button icon="ele-Plus" type="success" @click="handleAdd()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格数据 -->
        <el-table ref="tableListRef" :height="tableHeight" v-loading="loading" :data="tableList" border stripe>
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="status" label="分类状态">
                <template #default="{ row }">
                    <el-tag :type="row.status ? 'success' : 'warning'">{{ row.status ? '启用' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序号"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button type="warning" icon="ele-Edit" link @click="handleEdit(row)">修改</el-button>
                    <el-popconfirm :confirm-button-text="'确定'" :cancel-button-text="'取消'" :title="'确定删除吗？'"
                        @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button type="danger" link icon="ele-Delete" @click.stop>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <m-page :page="page" @pageChange="queryData" />
        <!-- 新增/修改组件 -->
        <CategoryEdit ref="editRef" @refresh="queryData" />
    </div>
</template>

<script setup lang="ts">
import useTablePage from '@/hooks/useTablePage';
import { getPageList, deleteById } from '@/api/goods/category'
import { defineAsyncComponent } from 'vue';

const CategoryEdit = defineAsyncComponent(() => import('./componments/CategoryEdit.vue'))

const { 
    editRef, tableListRef,
    loading, query, page, tableList, tableHeight,
    queryData,
    handleQuery,
    handleDelete,
    handleAdd,
    handleEdit
    } = useTablePage({ getPageList, deleteById })
</script>

<style scoped></style>